<script setup>
import FeaturedSlide from "@/components/Index/Featured-Slide.vue";
</script>

<template>
  <section class="featured">
    <div class="section-content">
      <div class="section-head">特写</div>
      <div class="featured-view-all-wrapper">
        <a href="#" class="nr-cta-primary-dark">查看全部</a>
      </div>
      <FeaturedSlide></FeaturedSlide>
    </div>
  </section>
</template>

<style lang="less" scoped>
.featured {
  background-color: #161617;
  color: #fff;
  overflow: hidden;
  padding-top: 80px;
  padding-bottom: 80px;
  .section-content {
    display: flex;
    flex-wrap: wrap;
    .section-head {
      margin-top: 0;
      color: #fff;
      flex: 1;
    }
  }
  .featured-view-all-wrapper {
    margin: 0;
    margin-bottom: 24px;
    height: 100%;
    align-self: flex-end;
    .nr-cta-primary-dark {
      letter-spacing: 0em;
    }
  }
}

@media only screen and (max-width: 1068px) {
  .featured {
    padding-top: 64px;
    padding-bottom: 64px;
    .section-head {
      margin-top: 5px;
    }
    .featured-view-all-wrapper {
      margin-bottom: 20px;
    }
  }
  .section-content {
    margin-left: auto;
    margin-right: auto;
    width: 692px;
  }
}
@media only screen and (max-width: 734px) {
  .featured {
    padding-top: 40px;
    padding-bottom: 40px;
    .section-head {
      margin-top: 0;
    }
    .featured-view-all-wrapper {
      margin-left: auto;
      margin-right: auto;
      order: 1;
      margin-top: 24px;

      margin-bottom: 0;
    }
  }
  .section-content {
    max-width: 366px;
  }
  .section-content {
    margin-left: auto;
    margin-right: auto;
    width: 87.5%;
  }
}
</style>
